<template>
    <h1>组合式Api</h1>
    <P>count:{{ count }}</P>
    <P>test:{{ test }}</P>
    <h2>reactive===================</h2>
    <p>obj :{{ obj }}</p>
    <p>obj.name :{{ obj.name }}</p>
    <p>obj.age :{{ obj.age }}</p>
    <p>arr[0] :{{ arr[0] }}</p>
    <p>arr[1] :{{ arr[1] }}</p>
    <h2>reactive===================</h2>
    <p>countAddFive:count+5:{{ countAddFive }}</p>
    <p>objAgeAddFive:age+5{{ objAgeAddFive }}</p>
    <h2>methods===================</h2>
    <h3>{{ count }}</h3>
    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updateObj">更新obj</button>
    <button @click="updateObj2">function更新obj</button>
    <h2>组件</h2>
    <Son :foo="obj.name" :age="obj.age"/>

</template>

<script setup>
    import { ref,reactive,computed,watch } from 'vue';
    import Son from './Son.vue'
    const count = ref(10)
    const test  = ref("Hello Word!!")
    console.log(count.value)
    const obj = reactive({
        name:'tom',
        age:12
    })

    const arr = reactive([1,2,3,4])

    const countAddFive = computed(()=>{
        return count.value+5
    })
    const objAgeAddFive = computed(()=>{
        return obj.age+5
    })

    //methods
    function countAddOne(){
        count.value++;
    }
    const countAddTwo =()=>{
        count.value+=2;
    }
    const updateObj =()=>{
        updateObjName()
    }
    function updateObj2 (){
        updateObjName()
    }
    const updateObjName =() =>{
        obj.name = "张三"
    }

    //watch
    watch(count,(newVal,oldVal) =>{
        console.log("count改变了")
        console.log("newVal",newVal)
        console.log("oldVal",oldVal)
    })
    watch(countAddFive,(newVal,oldVal) =>{
        console.log("countAddFive改变了")
        console.log("newVal",newVal)
        console.log("oldVal",oldVal)
    })
    watch(obj,(newVal,oldVal) =>{
        console.log("obj改变了")
        console.log("newVal",newVal)
        console.log("oldVal",oldVal)
    })
    watch(()=> obj.name,(newVal,oldVal) =>{
        console.log("obj.name改变了")
        console.log("newVal",newVal)
        console.log("oldVal",oldVal)
    })


</script>